<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>

<body>
    <header class="container">
        <img src="./images/logobig.png" alt="">
    </header>
    <nav class="" style="text-align: center;">
        <img src="./images/tw6.jpg" style="margin-right: 190px;">
        <div class="lg">
            <h4 style="font-weight: bold;display: inline-block;text-align: center;width: 280px;">登录商城</h4>
            <a class="text-right" href="./regiest.html"
                style="display: inline-block;padding: 4px 6px;background-color: #eee;color: black;float: right;">注册
            </a>
            <form action="">
                <div class="input-group">
                    <span class="input-group-addon iconfont">&#xe645;</span>
                    <input type="email" style="width: 220px;" class="form-control qq" placeholder="邮箱/手机/用户名"><span
                        class="sp"></span>
                </div>
                <div class="input-group">
                    <span class="input-group-addon iconfont">&#xe638;</span>
                    <input type="password" style="width: 220px;" class="form-control mima" placeholder="请输入密码">
                    <span class="mim"></span>
                </div>
                <input type="checkbox" style="margin-bottom: 20px;float: left;" class="ww"><span
                    style="float: left;">记住密码</span><span style="float: right;margin-right: 60px;">忘记密码</span>
                <input type="button" class="form-control btn btn-primary" value="登录">
            </form>
            <p>合作账号</p>
            <p class="zh">
                <a href="javascript:;"><span class="iconfont"
                        style="font-size: 25px;color: #0288D6;">&#xe882;</span>QQ登录</a>
                <a href="javascript:;"><span class="iconfont"
                        style="font-size: 25px;color: #0288D6;">&#xe600;</span>微博登录</a>
                <a href="javascript:;"><span class="iconfont"
                        style="font-size: 25px;color: #0288D6;">&#xe601;</span>微信登录</a>
            </p>
        </div>
    </nav>
    <div class="footer">
        <p class="ft1">
            <a href="javascript:;">恒望科技</a>
            <a href="./index.html">商城首页</a>
            <a href="javascript:;">支付宝</a>
            <a href="javascript:;">物流</a>
        </p>
        <hr style="margin-top: 0px;">
        <p><a href="javascript:;">关于恒望 </a><a href="javascript:;"> 合作伙伴</a><a href="javascript:;"> 联系我们</a><a
                href="javascript:;"> 网站地图</a> ◎ 2015-2025
            Hengwang.com版权所有.更多模板模板在线厚朴网络淘宝店-Collect
            from模板在线厚朴网络淘宝店</p>
    </div>
</body>

</html>
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script>
    var reg = /^1[3-9]\d{9}$/;//手机号
    var reg1 = /^\w{1,11}@\w{1,}.com$/; //邮箱
    var reg2 = /^\w{2,8}$/; //用户名
    var reg3 = /^\w{6,18}$/; //密码
    $('.btn-primary').on('click', function () {
        if ($('.ww').prop('checked') == true) {
            alert('是否记住密码？');
            if (reg.test($('.qq').val())) {
                $('.sp').text("✔");
                $('.sp').css('color', 'green');
            } else {
                $('.sp').text('❌');
                $('.sp').css('color', 'red');
            }
            if (reg3.test($('.mima').val())) {
                $('.mim').text('✔');
                $('.mim').css('color', 'green');
                if ($('.mima').val() == '111111') {
                    alert('登录成功，前往首页')
                } else {
                    $('.mim').text('❌');
                    $('.mim').css('color', 'red');
                    $('.mima').val('');
                }
            } else {
                $('.mim').text('❌');
                $('.mim').css('color', 'red');
                $('.mim').val('');
            }
        } else {

        }
    })
</script>